<template>
    <el-dialog
        title="指派导师"
        :visible.sync="is_show"
        width="450px"
        @closed="closed"
        center
    >
        <el-form :model="form" label-position="right" ref="form">
            <el-form-item
                label="选择导师"
                label-width="100px"
                prop="teacher_phone"
                :rules="[{ required: true, message: '请选择导师', trigger:['blur', 'change'] }]">
                <el-select
                    v-model="form.teacher_phone"
                    filterable
                    placeholder="请选择导师">
                    <el-option
                        v-for="item in options"
                        :key="item.phone"
                        :label="item.name"
                        :value="item.phone">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <template slot="footer">
            <el-button v-no-more-click:3000 @click="is_show = false">取消</el-button>
            <el-button v-no-more-click:3000 @click="submit" type="primary">确认</el-button>
        </template>
    </el-dialog>
</template>

<script>
export default {
    data() {
        return {
            is_show: false,
            options: [],
            form: {
                teacher_phone: ''
            },
            student_phone: ''
        }
    },
    methods: {
        closed() {
            Object.assign(this.$data, this.$options.data())
            this.$refs['form'].resetFields()
        },
        showOn(data) {
            this.student_phone = data.phone
            this.is_show = true
            this.getAllTeacher()
        },
        submit() {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    let params = {
                        teacher_phone: this.form.teacher_phone,
                        student_phone: this.student_phone
                    }
                    this.$axios.put('/api/user/apprentice', params).then(res => {
                        if (res.data.code == 200) {
                            this.$emit('refresh')
                            this.is_show = false
                            this.$message({
                                type: 'success',
                                message: '指派导师成功'
                            })
                        }
                    }).catch(e => {
                        console.log(e)
                    })
                }
            })
        },
        getAllTeacher() {
            this.$axios.get('/api/user/all_teacher').then(res => {
                if (res.data.code == 200) {
                    this.options = res.data.data
                } else {
                    this.$message({
                        type: 'error',
                        meesage: res.data.message
                    })
                }
            }).catch(e => {})
        }
    }
}
</script>

<style lang="less" scoped>
/deep/.el-dialog {
    .el-select {
        width: 100%;
    }
}
</style>
